<!--兑换-->
<template>
  <scroller class="all bg1" @rightBtn="rightBtn">
    <div class="wrapper" v-if="rate">

      <!-- 兑出数量 -->
      <div class="height30"></div>
      <text class="font30 text2">{{T('兑出数量')}}</text>
      <div class="row acenter">
        <input class="input font30 text2 all" v-model="fromAmount" type="number" :placeholder="T('请输入数量')" maxlength="12" @input="onInputFrom">
        <div class="width10"></div>
        <text class="font30 text2" v-if="fromCoin == 'VTN'">{{fromCoin}}</text>
        <div v-else class="row acenter" @click="selectClick(fromCoin,1)">
          <text class="font30 text2">{{fromCoin}}</text>
            <LImage class="img-arrow" :src="Config.img('v2_sanjiao_xia_bai.png')"></LImage>
        </div>
        <div class="line-vertical line1"></div>
        <text class="font26 main-t1" @click="allClick">{{T('全部')}}</text>
      </div>
      <div class="line line1"></div>

      <!--可用余额-->
      <div class="height10"></div>
      <div class="row acenter" @click="quityClick">
        <text class="font22 text3">{{T('可用余额')+" "+balance+" "+fromCoin}}</text>
        <LImage class="img-explain" :src="Config.img('v2_wenhao.png')"></LImage>
      </div>

      <!-- 收到数量 -->
      <div class="height90"></div>
      <text class="font30 text2">{{T('收到数量')}}</text>
      <div class="row acenter">
        <input class="input font30 text2 all" v-model="toAmount" type="number" :placeholder="T('请输入数量')" maxlength="12" @input="onInputTo">
        <div class="width10"></div>
        <text class="font30 text2" v-if="toCoin == 'VTN'">{{toCoin}}</text>
        <div v-else class="row acenter" @click="selectClick(toCoin,2)">
          <text class="font30 text2">{{toCoin}}</text>
            <LImage class="img-arrow" :src="Config.img('v2_sanjiao_xia_bai.png')"></LImage>
        </div>
      </div>
      <div class="line line1"></div>
      <div class="height60"></div>
      <div class="row acenter">
        <text class="font24 text3">{{T('当前汇率')}}</text>
        <text class="font24 text2">{{" 1 "+fromCoin+" ≈ "+rate+" "+toCoin}}</text>
      </div>

      <!--兑换-->
      <div class="ok main-bt1" @click="okClick">
        <text class="font30 text1">{{T('兑换')}}</text>
      </div>

      <!--切换按钮-->
      <LImage ref="exchangeIcon" class="img-change" :src="Config.img('btn_wallet_exchange.png')"  @click="changeClick"></LImage>

    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper {
  padding-top: 60px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 90px;
}
/************************** 输入框*/
.input{
  height:80px;
  placeholder-color:#6E7488; 
}
.line {
  height: 1;
}
.line-vertical{
  height: 40px;
  width: 1px;
  margin-left: 10px;
  margin-right: 10px;
}
.img-arrow{
  width: 22px;
  height: 13px;
  margin-left: 20px;
  margin-right: 30px;
}
.img-explain {
  width:18px;
  height:18px;
  margin-left: 6px;
}
.img-change {
  width:90px;
  height:90px;
  position:absolute;
  right: 30px;
  top:270px;
}
.ok{
  justify-content: center;
  align-items: center;
  height:72px;
  border-radius:12px;
  margin-top: 90px;
}
/********************** 宽高*/
.height90 {
  height: 90px;
}
</style>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";

const animation = weex.requireModule("animation");
const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('兑换'));
weexFunction.setRightBtn(T('兑换记录'));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,
      wallet:undefined,
      
      coins:[], //支持币种
      fromCoin:undefined, //兑出币
      fromAmount:'', //兑出数量
      toCoin:'VTN', //收到币
      toAmount:'', //收到数量

      balance:undefined, //余额
      rate:undefined, //汇率

      exchagneRotate:0, //旋转角度
    };
  },

  created(){
    var param = weex.config;
    this.wallet = param.wallet;

    this.httpGetCoin();
  },

  methods: {
    /**************************通信触发*/
    //右按钮触发
    rightBtn() {
      var nav = {'navColor':'#0c0c0c'};
      var param = {'wallet':this.wallet}
      jnavigator.open("", "wallet/WalletDhRecord",param, nav);
    },
    
    /************************** HTTP*/
    //获取兑换支持币种
    httpGetCoin(){

      jmodal.showLoad();
      var param = {'wallet':this.wallet};
      jhttps.post("tradeV2/getRate",param,true,(data)=>{
        if(data.status == 200){
          data = data.data;
          var datas = data.supportCoins;
          var coins = [];
          for (let index = 0; index < datas.length; index++) {
            var coin = datas[index];
            coin !='VTN' && coins.push(coin);
          }
          this.fromCoin = coins[0];
          this.coins = coins;

          this.httpGetRate();
        }else{
          jmodal.hideLoad();
          jmodal.toast(data.msg);
        }
      });
    },

    //获取兑换汇率和余额
    httpGetRate(){
      var param = {'fromCoin':this.fromCoin, 
                  'toCoin':this.toCoin,
                  'wallet':this.wallet};
      jhttps.post("tradeV2/getRate", param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;
          this.balance = data[this.fromCoin];
          this.rate = data.coinRate;
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //兑换
    httpConnvert(){

      jmodal.showLoad();
      var param = {'fromCoin':this.fromCoin, 
                    'toCoin':this.toCoin,
                    'toNumber':this.toAmount,
                    'wallet':this.wallet};
      jhttps.postX("tradeV2/convertCoin", param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.alert(T('兑换成功'),()=>{
            var nav = {'navColor':'#0c0c0c'};
            var param = {'wallet':this.wallet};
            jnavigator.load("", "wallet/WalletDh", param, nav);
          });
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /*******************************输入框回调*/ 
    //输入内容改变-兑出
    onInputFrom(e){
      var toAmount = jmath.cheng(this.fromAmount, this.rate);
      this.toAmount = jmath.gfCoin(toAmount, this.toCoin, false);
    },

    //输入内容改变-收到
    onInputTo(e){
      var fromAmount = jmath.chu(this.toAmount, this.rate);
      this.fromAmount = jmath.gfCoin(fromAmount, this.fromCoin, false);
    },
    
    /************************** 点击*/
    //全部点击
    allClick(){
      this.fromAmount = this.balance;
      this.onInputFrom();
    },  

    //币选择点击
    selectClick(coin, side){

      jmodal.actionSheet(this.coins,coin,(value)=>{
        if(side == 1){
          this.fromCoin = value;
        } else{
          this.toCoin = value;
        }
      });
    },

    //交换币种
    changeClick(){

      var fromCoin = this.toCoin;
      var toCoin = this.fromCoin;

      this.fromCoin = fromCoin;
      this.fromAmount = '';

      this.toCoin = toCoin;
      this.toAmount = '';

      this.balance = '0'; //余额

      //动画
      this.exchagneRotate+=360;
      animation.transition(this.$refs.exchangeIcon, {
        styles: {
          transform: 'rotate('+this.exchagneRotate+'deg)',
        },
        duration: 500, //ms
        timingFunction: 'ease',
        needLayout:false,
        delay: 0 //ms
      },  function () {});

      jmodal.showLoad();
      this.httpGetRate();
    },

    //余额说明
    quityClick(){
      jmodal.alert(T('提现、转账、兑换的VTN需含提现权益。'));
    },

    //兑换
    okClick() {

      if(!this.toAmount || this.toAmount == '0'){
        jmodal.toast(T('请输入正确的兑换数量'));
        return;
      }

      if(parseFloat(this.fromAmount)>this.balance){
        jmodal.toast(T('可用余额不足'));
        return;
      }

      this.httpConnvert();
    },
  }
}
</script>
